Skip to content

Sync Storybook theme with embedding docs site#100

Merged
einari merged 1 commit into
mainfrom
feat/storybook-docs-site-theme-sync
Jun 12, 2026
Merged

Sync Storybook theme with embedding docs site#100
einari merged 1 commit into
mainfrom
feat/storybook-docs-site-theme-sync

Conversation

@einari

@einari einari commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Added

  • Storybook automatically switches between the Lara Dark Blue and Lara Light Blue PrimeReact themes when the embedding Cratis docs site toggles its dark/light mode.

When Storybook is embedded via StorybookEmbed (fullPage mode), the docs
site sends a STORYBOOK_THEME_CHANGE postMessage whenever its theme toggle
changes. Wire up a message listener in preview.js that:
- Maps docs-site 'light'/'dark' to the lara-light/lara-dark PrimeReact
  theme entries respectively
- Applies the theme immediately (applyThemeLink / applyBodyClass) so the
  switch is instant without waiting for a story re-render
- Stores the preference in _docsSiteTheme so the decorator also uses it on
  subsequent renders, overriding the Storybook toolbar selection

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@einari einari merged commit 2df6e0a into main Jun 12, 2026
4 checks passed
@einari einari deleted the feat/storybook-docs-site-theme-sync branch June 12, 2026 11:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant